<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CollegeDec from '@/pages/college/collegeDetail/college-dec.vue'
import CollegePostgraduate from '@/pages/college/collegeDetail/college-postgraduate.vue'
import CollegeEmploy from '@/pages/college/collegeDetail/college-employ.vue'
import CollegeRecruit from '@/pages/college/collegeDetail/college-recruit.vue'
import collegeRecommendEmploy from '@/pages/college/collegeDetail/college-recommendEmploy.vue'

const { initPageId } = defineProps({
  initPageId: {
    type: Number,
    default: 0,
  },
})

const collegeList = ref<[]>([])

const guipage = ref<any>(null)
// 页面加载
const pageLoading = ref<boolean>(false)
onLoad(() => {
  collegeList.value = []

  setTimeout(() => {
    // 对演示数据随机刷新模拟数据刷新
    // guipage.value.stoploadmore()
  }, 200)
})

onMounted(() => {
  pageId.value = initPageId
})

interface Tag {
  name: string
  id: number | string
}

const tagList = ref<Tag[]>([
  {
    id: 0,
    name: '重庆 重庆市',
  },
  {
    id: 1,
    name: '公办 普通本科',
  },
])

const pageId = ref<number>(0)
const changePage = (e) => {
  console.log(e)
  pageId.value = e
}
</script>

<template>
  <gui-page
    ref="guipage"
    :api-loading-status="apiLoadingStatus"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :loadmore="false"
    :refresh="false"
    style="background-color: white"
    @loadmorefun="getNews"
    @reload="reload"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <gui-header-leading :back="true" :home="false" />
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">首页</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width: 120rpx" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gFixedTop>
      <!-- 分类导航 -->
      <view id="myheader" class="gui-border-b gui-bg-gray gui-dark-bg-level-3">
        <view class="wh100p bcolorfff">
          <img class="college-img" style="" />
          <view class="flex flex-column bcolorfff" style="padding: 10rpx 20rpx">
            <view class="flex gap12">
              <view class="flex-center college-logo-box" style="">
                <img />
              </view>
              <view class="flex-column">
                <view class="flex gap18" style="">
                  <view class="flex column-center gap18" style="height: 30rpx">
                    <text class="collegeDetail-title" style="color: #537bb6; font-size: 38rpx">重庆医科大学</text>
                    <text class="gui-icons gui-block gui-color-gray gui-text">&#xe645;</text>
                  </view>
                  <view
                    class="flex-center column-center"
                    style="width: 200rpx; height: 70rpx; border-radius: 40rpx; background-color: antiquewhite"
                  >
                    <img style="width: 30rpx; height: 20rpx" />
                    <text>问招办</text>
                  </view>
                </view>
                <view class="flex" style="margin-top: 6rpx; font-size: 24rpx">
                  <view v-for="(item, index) of tagList" :key="index">
                    {{ item.name }}
                    <text v-if="index != tagList.length - 1" style="margin-right: 10rpx">|{{ ' ' }}</text>
                  </view>
                </view>
              </view>
            </view>

            <switch-navigation
              class="w100p flex"
              :items="[
                { id: 0, name: '简介' },
                { id: 1, name: '招生' },
                { id: 2, name: '保研率' },
                { id: 3, name: '就业' },
                { id: 4, name: '推荐专业' },
              ]"
              :size="0"
              style="margin-top: 20rpx"
              @change="changePage"
            />
          </view>
        </view>
      </view>
    </template>
    <template #gBody>
      <view class="wh100p" style="padding: 10rpx 25rpx; box-sizing: border-box; margin-top: 540rpx">
        <scroll-view class="wh100p" scroll-y>
          <college-dec v-show="pageId == 0" class="college-dec wh100p" />

          <!--          <view v-show="pageId == 1" class="college-recruit flex-column wh100p">-->
          <college-recruit v-show="pageId == 1" class="wh100p" />

          <college-postgraduate v-show="pageId == 2" class="wh100p" />
          <view v-show="pageId == 3">
            <college-employ />
          </view>
          <view v-show="pageId == 4">
            <college-recommend-employ />
          </view>
        </scroll-view>
      </view>
    </template>
  </gui-page>
</template>

<style scoped>
.college-img {
  width: 100%;
  height: 300rpx;
  background-color: aqua;
}

.college-logo-box {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}

.college-logo-box image {
  width: 120rpx;
  height: 120rpx;
  background-color: aliceblue;
  border-radius: 50%;
}
</style>
